<template>
  <el-select
    class="select"
    ref="select"
    v-model="valueLabels"
    v-bind="$attrs"
    @clear="handleSelectClear"
    clearable
    @remove-tag="handleRemoveTag">
    <el-option class="option" value="" :disabled="true">
      <el-tree
        ref="tree"
        class="tree"
        v-on="$listeners"
        :data="options"
        @check="check"
        :node-key="idKey"
        :props="{label:labelKey}"
        :check-strictly="false"
        :show-checkbox="multiple"
        highlight-current
        @node-click="handleNodeClick">
      </el-tree>
    </el-option>
  </el-select>
</template>

<script>
  export default {
    name: 'SelectTree',
    components: {},
    props: {
      // 树的字典值
      options: {
        type: Array,
        default: () => {
          return []
        }
      },
      multiple: {
        type: Boolean,
        default: false
      },
      value: {
        type: [Array, String],
        default: () => []
      },
      labelKey: {
        type: String,
        default: 'label'
      },
        idKey:{
          type:String,
            default:'id'
        }
    },
    data () {
      return {
        valueLabels: '',
        valueIds: [],
        // 打平的选择数据
        checkedNodes: []
      }
    },
    mounted () {
      // 对传入参数为字符串进行处理
      if (!Array.isArray(this.value)) {
        this.$refs.tree.setCheckedKeys([this.value])
      } else {
        this.$refs.tree.setCheckedKeys(this.value)
      }
      this.valueLabels = this.$attrs.multiple ? [] : ''
    },
    watch: {
      value: {
        handler (newV) {
          this.$refs.tree.setCheckedKeys(newV)
          this.valueIds = newV
          this.valueLabels = this.$refs.tree.getCheckedNodes().map(item => {
            item = item[this.labelKey]
            return item
          })
        }
      }
    },
    methods: {
      hiddenPopper () {
        this.$refs.select.blur()
      },

      handleNodeClick (data) {
        if (this.multiple) {
          this.valueIds.push(data[this.idKey])
          // 去重
          let set = new Set(this.valueIds)
          this.valueIds = Array.from(set)
          this.$emit('input', this.valueIds)
        } else {
          this.valueIds = [data[this.idKey]]
          this.$emit('input', this.valueIds)
        }
        this.hiddenPopper()
      },

      handleSelectClear () {
        this.$refs.tree.setCheckedKeys([])
        this.$emit('input', [])
      },

      handleRemoveTag (label) {
        this.checkedNodes = this.checkedNodes.filter(item => item[this.labelKey] !== label)
        this.valueIds = this.checkedNodes.map((item) => {
          item = item[this.idKey]
          return item
        })
        this.$emit('input', this.valueIds)
      },

      check (nowClick, checkedData) {
        this.valueIds = checkedData.checkedKeys
        this.checkedNodes = checkedData.checkedNodes
        this.$emit('input', this.valueIds)
      }
    }
  }
</script>

<style scoped>
.option {
    height: auto;
  padding: 0!important;
    background-color: white;
}
.tree{
  width: 100%;
}
.select{
  width:100%;
}
</style>
